<!DOCTYPE html>
<html>
<head>
    <title>Chroma.js</title>
    <script type="text/javascript" src="../../chroma.js"></script>
</head>
<style type="text/css">
    body { font-family: Helvetica; }
    h1 { font-size: 18px; }
    .row { margin-bottom: 10px; }
    .left, .right { display: inline-block; margin-right: 20px; position: relative; }
    .swatch { display: inline-block; width: 60px; height: 50px; }
    .swatch.overlay { position: absolute; left: 60px; }
</style>
<body>


    <script type="text/javascript">

    var names = Object.keys(chroma.colors), l = names.length;

    var cssMap = {
        dodge: 'color-dodge',
        burn: 'color-burn'
    };

    Object.keys(chroma.blend).forEach(function(mode) {

        document.write('<h1>'+mode+'</h1>');
        for (var i=0; i<10; i++) {
            var row = el('div.row'),
                left = el('div.left'),
                right = el('div.right');

            var bottom = names[Math.floor(Math.random()*l)],
                top = names[Math.floor(Math.random()*l)];

            swatch(bottom, left);
            swatch(chroma.blend(bottom, top, mode).hex(), left);
            swatch(top, left);

            swatch(bottom, right);
            swatch(bottom, right);
            var s = swatch(top, right);
            s.className = 'swatch overlay';
            s.style.mixBlendMode = cssMap[mode] || mode;
            swatch(top, right);
        }

    });

    function swatch(color, parent) {
        var s = el('div.swatch', parent);
        s.setAttribute('title', color);
        s.style.background = color;
        return s;
    }

    function el(t, parent) {
        var p = t.split('.');
        var e = document.createElement(p[0]);
        if (p[1]) e.className = p[1];
        (parent || document.body).appendChild(e);
        return e;
    }

    </script>

</body>
</html>